<!--  -->
<template>
    <div>
        <!--面包屑-->
        <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--学生列表卡片-->
        <el-card class="box-card">
            <el-form :inline="true" :model="studentsVO" class="demo-form-inline">
              <el-form-item label="所在年级" label-width="70px">
                <el-select v-model="studentsVO.gradeName" clearable placeholder="请选择">
                    <el-option
                        v-for="item in grades"
                        :key="item.id"
                        :label="item.gradeName"
                        :value="item.id">
                        <span style="float: left">{{ item.gradeName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">
                            <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.gradeCOUNT }}</span>
                        </span>
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="所属分院" label-width="70px">
                <el-select v-model="studentsVO.instituteName" clearable placeholder="请选择">
                    <el-option
                        v-for="item in institutes"
                        :key="item.id"
                        :label="item.instituteName"
                        :value="item.id">
                        <span style="float: left">{{ item.instituteName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">
                            <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.instCOUNT }}</span>
                        </span>
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="所在专业" label-width="70px">
                <el-select v-model="studentsVO.specialtyName" clearable placeholder="请选择"
                    @change="selectTrigger(studentsVO.specialty)">
                    <el-option
                        v-for="item in specialties"
                        :key="item.id"
                        :label="item.specialtyName"
                        :value="item.id">
                        <span style="float: left">{{ item.specialtyName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">
                            <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.specCOUNT }}</span>
                        </span>
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="所在班级" label-width="70px">
                <el-select v-model="studentsVO.studentClazz" clearable placeholder="请选择">
                    <el-option
                        v-for="item in clazzes"
                        :key="item.id"
                        :label="item.clazzName"
                        :value="item.id">
                        <span style="float: left">{{ item.clazzName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px"></span>
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="学号" label-width="70px">
                    <el-input v-model="studentsVO.studentId" placeholder="请输入学号" clearable></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="70px">
                    <el-input v-model="studentsVO.studentName" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="40px">
                    <el-radio v-model="studentsVO.sex" label="0">男</el-radio>
                    <el-radio v-model="studentsVO.sex" label="1">女</el-radio>
                    <el-radio v-model="studentsVO.sex" label="">全部</el-radio>
                </el-form-item>
                <el-form-item style="margin_left: 10px">
                    <el-button icon="el-icon-refresh" @click="resetStudentsVO">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" @click="getStudentList">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
                    <el-button type="warning" icon="el-icon-download">导出</el-button>
                </el-form-item>
            </el-form>
            <!--表格内容显示区域-->
            <el-table
                :data="studentList"
                border
                stripe
                max-height="400"
                    style="width: 100%;">
                <el-table-column
                    sortable=""
                    prop="id"
                    label="#"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="studentId"
                    label="学生学号"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="studentName"
                    label="姓名"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="sex"
                    label="性别"
                    width="50">
                    <template slot-scope="scope">
                        <span class="el-tag el-tag--success el-tag--mini el-tag--light">{{scope.row.sex==0?'男':(scope.row.sex==1?'女':'保密')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable
                    prop="gradeName"
                    label="年级"
                    width="80">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="instituteName"
                    label="所属分院"
                    width="130">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="specialtyName"
                    label="所在专业"
                    width="210">
                </el-table-column>
                <el-table-column
                    prop="clazz"
                    label="班级"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="studentPhone"
                    label="学生电话"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="studentQq"
                    label="学生QQ"
                    width="120">
                </el-table-column>


                <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                  <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row.id)"></el-button>
                  <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
                  <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination
            style="padding-top: 15px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[6, 10, 20, 30]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            <StudentsAdd :addOrUpdateVisible="addOrUpdateVisible" :grades="grades" :institutes="institutes" :specialties="specialties" :clazzes="clazzes" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></StudentsAdd>
            <StudentsEdit :editDialogVisible="editDialogVisible" :grades="grades" :institutes="institutes" :specialties="specialties" :clazzes="clazzes" @changeshow="showEditDialogVisible" ref="editDialog"></StudentsEdit>
        </el-card>
    </div>
</template>

<script>
import axios from "axios"
import { editStudent, findStudentList } from '../../api/students'
import { findInstitute } from '../../api/inst'
import { findSpecialty } from '../../api/spec'
import { findClazz } from '../../api/class'
import { findGrade } from '../../api/grade'
import StudentsAdd from './StudentsAdd'
import { deleteStudent } from '../../api/students'
import StudentsEdit from './StudentsEdit'
export default {
    name: 'Students',
    data() {
      return {
          studentsVO: {
              gradeName: '',
              instituteName: '',
              specialtyName: '',
              studentClazz: '',
              studentId: '',
              studentName: '',
              sex: ''
            
          },
        // 控制新增弹窗的显示与隐藏
        addOrUpdateVisible: false,
        // 控制编辑弹窗的显示与隐藏
        editDialogVisible: false,
        // 学生集合
        studentList: [],
        // 每页显示的页数
        size: 6,
        // 总条数
        total: 100,
        //当前页码
        current: 1,
         
        institutes: [],
        specialties: [],
        grades: [],
        clazzes: [],
        
      }
    },
    components: {
        StudentsAdd,
        StudentsEdit
    },
    created(){
      // 创建组件的时候调用查询所有用户的方法
      this.getStudentList()
      this.getInstitute()
      this.getSpecialty()
      this.getClazz()
      this.getGrade()
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      //当每页条数改变的时候
      handleSizeChange(val) {
        //将value赋值给size
        this.size = val;
        //重新去后台查询数据
        this.getStudentList();
      },
      //当前页码改变的时候
      handleCurrentChange(val) {
        this.current = val;
        this.getStudentList();
      },
      async getStudentList(){
       const {data} = await findStudentList(this.current,this.size,this.studentsVO)
       console.log(data);
       this.studentList = data.data.records;
       this.total = data.data.total;
      },
      async getInstitute(){
       const {data} = await findInstitute()
       console.log(data);
       this.institutes = data.data.institutes;
       
      },
      async getSpecialty(){
       const {data} = await findSpecialty()
       console.log(data);
       this.specialties = data.data.specialties;
    
      },
      selectTrigger(val) {
          this.$options.methods.getSpecialty();
      },
      async getClazz(){
          const {data} = await findClazz()
          console.log(data);
          this.clazzes = data.data.clazzes;
          
      },
      async getGrade(){
          const {data} = await findGrade()
          console.log(data);
          this.grades = data.data.grades;
          
      },
      //重置表单
      resetStudentsVO(){
          this.studentsVO.studentId = ''
          this.studentsVO.specialtyName = ''
          this.studentsVO.sex = ''
          this.studentsVO.gradeName = ''
          this.studentsVO.instituteName = ''
          this.studentsVO.specialtyName = ''
          this.studentsVO.studentClazz = ''
          this.getStudentList()
      },
        // 按钮点击事件 显示新增编辑弹窗组件
      show(){
        this.addOrUpdateVisible = true
      },
      edit(id) {
          this.editDialogVisible = true
      },
        // 监听 子组件弹窗关闭后触发，有子组件调用
      showAddOrUpdate(data){
        if(data === 'false'){
          this.addOrUpdateVisible = false
        }else{
          this.addOrUpdateVisible = true
        }
      },
      showEditDialogVisible(data){
          if(data === 'false'){
              this.editDialogVisible = false
          }else{
              this.editDialogVisible = true
          }
      },
    //删除学生
    async del(id) {
        var res = await this.$confirm(
            "此操作将永久删除该学生信息,是否继续?",
            "提示",
            {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }
        ).catch(() => {
            this.$message({
                type: "info",
                message: "已取消删除"
            });
        });
        if(res == "confirm") {
            const { data: res } = await deleteStudent(id)
            console.log(res);
            if(res.code == 20000) {
                this.$notify.success({
                    title:'操作成功',
                    message:'学生删除成功',
                });
                this.getStudentList();
                this.getInstitute();
                this.getSpecialty();
                this.getClazz();
                this.getGrade();
            } else {
                this.$message.console.error(res.msg);
            }
        }
    },
    
      
    }
}
</script>
<style lang='scss' scoped>


</style>